<template>
  <div>
    <el-dialog title="excel导入" :visible.sync="userlogin.flag">
      <!-- excel导入 -->
      <el-upload
        class="upload-demo"
        drag
        action=""
        :auto-upload="false"
        multiple
        accept=".xlsx,.xls"
        :on-change="loading"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>

      <!-- 数据表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="username" label="管理员姓名"> </el-table-column>
        <el-table-column prop="password" label="管理员密码"> </el-table-column>
        <el-table-column prop="status" label="管理员状态"> </el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button @click="userlogin.flag = false">取 消</el-button>
        <el-button type="primary" @click="uploadingserver">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 加载框/进度条 -->
    <div class="progress" v-show="rocessBuffer">
      <el-row>
        <el-col :span="10"
          ><el-progress type="circle" :percentage="schedule"></el-progress
        ></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import xlsx from "xlsx";
import { readFile } from "@/utils/bobl";
export default {
  props: ["userlogin"],
  data() {
    return {
      tableData: [], // 表格数据
      rocessBuffer: false, // 加载框状态
      schedule: 0, // 进度条百分比
      file: {},
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {
    userlogin: {
      deep: true,
      handler: function (newval) {
        if (newval.flag == false) {
          (this.schedule = 0),
            (this.rocessBuffer = false),
            (this.tableData = []);
        }
      },
    },
  },
  methods: {
    async loading(file) {
      // 文件导入自动监听
      let loadInsrance = this.$loading({
        // 系统自带提示
        text: "文档正在上传中...",
        fullscreen: true,
      });
      setTimeout(() => {
        loadInsrance.close(); // 关闭提示
      }, 2000);

      let chars = {
        // 键名对照表
        username: { text: "管理员姓名", type: "string" },
        password: { text: "管理员密码", type: "number" },
        status: { text: "状态", type: "string" },
      };
      let fileArr = await readFile(file.raw); // 二进制转换
      //    console.log(fileArr);
      let sheet = xlsx.read(fileArr, { type: "binary" }); // 使用xlsx插件进行二进制转换
      //    console.log(sheet);
      let sheetsData = sheet.Sheets[sheet.SheetNames[0]]; // 获取初次二进制转换的数据
      //   console.log(sheetsData);
      let sheetsList = xlsx.utils.sheet_to_json(sheetsData); // 获取到的数据转化成json格式
      //   console.log(sheetsList);
      let dataList = sheetsList.map((item, index) => {
        // 重组数据及键值
        // console.log(item);
        let obj = {};
        for (let key in chars) {
          //   console.log(key);
          let { text, type } = chars[key]; //结构键值
          //   console.log(text,type);
          let value = item[text];
          //   console.log(value);
          type == "string" ? (value = String(value)) : ""; // 判断数据类型
          type == "number" ? (value = Number(value)) : ""; // 判断数据类型
          obj[key] = value;
          //   console.log(obj);
        }
        return obj;
      });
      // console.log(dataList);
      //   return
      this.tableData = this.tableData.concat(dataList); // 将数据拼接到表格中
      this.file = file.raw; // 将获取到的数据存储，交给服务器端
    },
    async uploadingserver() {
      // 确认事件（上传服务器）
      this.rocessBuffer = true;
      // 监听上传事件
      let onUploadProgress = (process) => {
        this.schedule = parseInt(process.loaded / process.total) * 100;
      };
      this.$api
        .reqAddEXcel(
          {
            // 上传服务器
            file: this.file,
            tableData: this.tableData,
          },
          onUploadProgress
        )
        .then((res) => {
          this.userlogin.flag = false;
        });
    },
  },
  components: {},
};
</script>

<style scoped lang="scss">
.progress {
  position: fixed;
  top: 30%;
  left: 50%;
  z-index: 99999;
}
</style>
